<template>
  <div
    class="toast-container fixed top-4 left-1/2 transform -translate-x-1/2 z-2000 flex flex-col items-center gap-2"
  >
    <transition-group name="toast-fade" tag="div">
      <div
        v-for="toast in toasts"
        :key="toast.id"
        class="toast-item flex items-center px-4 py-3 rounded-lg shadow-lg min-w-[300px] max-w-md"
        :class="getToastClass(toast.type)"
      >
        <!-- 图标根据类型变化 -->
        <div v-if="toast.type === 'success'" class="text-success mr-3 select-none">
          <i-fa7-solid-check-circle class="text-xl" />
        </div>
        <div v-else-if="toast.type === 'error'" class="text-error mr-3 select-none">
          <i-fa7-solid-circle-xmark class="text-xl" />
        </div>
        <div v-else-if="toast.type === 'warning'" class="text-warning mr-3 select-none">
          <i-fa7-solid-triangle-exclamation class="text-xl" />
        </div>
        <div v-else class="text-info mr-3 select-none">
          <i-fa7-solid-circle-info class="text-xl" />
        </div>
        <span class="flex-1">{{ toast.message }}</span>
        <button class="ml-2 text-gray-500 hover:text-gray-700" @click="removeToast(toast.id!)">
          <i-fa7-solid-times class="text-xl" />
        </button>
      </div>
    </transition-group>
  </div>
</template>

<script setup lang="ts">
// 为组件添加名称以解决多词组件名问题
defineOptions({
  name: 'ToastComponent',
})

const uiStore = useUIStore()
const { toasts } = storeToRefs(uiStore)
const { removeToast } = uiStore

// 获取 Toast 样式类
const getToastClass = (type: string) => {
  switch (type) {
    case 'success':
      return 'bg-green-100 text-green-800 border border-green-200'
    case 'error':
      return 'bg-red-100 text-red-800 border border-red-200'
    case 'warning':
      return 'bg-yellow-100 text-yellow-800 border border-yellow-200'
    case 'info':
    default:
      return 'bg-blue-100 text-blue-800 border border-blue-200'
  }
}
</script>

<style scoped>
.toast-fade-enter-active,
.toast-fade-leave-active {
  transition: all 0.3s ease;
}

.toast-fade-enter-from {
  opacity: 0;
  transform: translateY(-20px);
}

.toast-fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

.toast-fade-move {
  transition: transform 0.3s ease;
}
</style>
